<template>
	<view id="forget">
		<view class="container">
			<!--顶部返回按钮-->
			<view class="wrapper">
				<view class="left-top-sign"></view>
				<view class="welcome">
				    Hi, <text>欢迎注册</text>
				 </view>
				<view class="input-content">
					<view class="input-item">
						<input type="number" v-model="username" placeholder="请输入用户名,6-36位数字" />
					</view>
					<view class="input-item">
						<input type="number" v-model="mobile" placeholder="请输入手机号码" maxlength="11" />
					</view>
					<view class="input-item">
						<input type="text" v-model="nickname" placeholder="请输入您的姓名"/>
					</view>
					<view class="input-item">
						<input type="password" v-model="password" placeholder="请输入密码" maxlength="18" />
					</view>
					<view class="input-item input-item-sms-code">
						<view class="input-wrapper">
							<view class="oa-input-wrapper">
								<input type="text" placeholder="请输入验证码" v-model="code"  data-key="mobile" />
							</view>
							<view class="sms-code-btn">
								<image :src="mobile_code" style="width:250rpx;height:62rpx;" @click="reimg()"/>
							</view>
						</view>
					</view>
				</view>
				<button class="confirm-btn" @tap="bindLogin">注册</button>
				<view class="register-section" style="color:#888;font-size:30rpx">
					已有账号？现在<text style="color:#39ACFF;text-decoration:underline" @tap="navTo('/pages/common/login')">登 录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				nickname:'',
				mobile: '',
				mobile_code: '',
				code:'',
				password: '',
				text: '获取验证码',
				timerFlag: false,
			};
		},

		mounted() {
			this.reimg()
		},
		onLoad:function() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: "#0074ec",
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				},
				success:function(res){
					console.log(res)
				},
			    fail:function(res){
					console.log(res)
				}
			})
		},
		methods: {
			reimg(){
				console.info("OK")
				// #ifdef APP
				this.mobile_code=this.link+'agent/user/getcode?a='+Math.random()
				// #endif
				
				// #ifdef H5
				this.mobile_code='/agent/agent/user/getcode?a='+Math.random()
				// #endif
			},
			navTo(item) {
				uni.navigateTo({
					url: item
				})
			},
			bindLogin: function() {
				let that = this;
				if (!this.username) {
					uni.showToast({
						icon: 'none',
						duration: 1000,
						title: '请输入用户名'
					});
					return
				}
				if (!this.mobile) {
					uni.showToast({
						icon: 'none',
						duration: 1000,
						title: '请输入手机号'
					});
					return
				}
				if (!this.password) {
					uni.showToast({
						icon: 'none',
						duration: 1000,
						title: '请输入密码'
					});
					return
				}
				if (!this.code) {
					uni.showToast({
						icon: 'none',
						duration: 1000,
						title: '请输入验证码'
					});
					return
				}
				
				this.httpClient.post('agent/user/reg', {
					mobile: this.mobile,
					username:this.username,
					nickname:this.nickname,
					password: this.password,
					code: this.code
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							icon: 'none',
							duration: 1000,
							title: res.msg
						});
						    setTimeout(function() {
						    	uni.redirectTo({
						    		url: '/pages/common/login'
						    	});
						    }, 1500)
						
					}
				});
			},

		}
	};
</script>

<style lang="scss">
	#forget{
		height: 100%;
		background: #FFFFFF;
		.confirm-btn {
			margin: 100upx 30upx 0upx;
			height: 90upx;
			line-height: 90upx;
			color: #FFFFFF;
			background: $uni-color-primary;
		}
	}


	.container {
		padding-top: 120upx;
		position: relative;
		width: 100vw;
		overflow: hidden;

		.wrapper {
			position: relative;
			width: 100vw;
			z-index: 90;
			background: #fff;
			padding-bottom: 40upx;

			.welcome {
				position: relative;
				left: 50upx;
				top: -90upx;
				font-size: 70upx;
				color: #555;
				// text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
				font-weight: 550;
				text{
					font-weight: 300;
					font-size: 50upx;
					color: #000000;
				}
			}

			.input-content {
				padding: 0 30upx;
			}

			.input-item {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;
				padding: 0 30upx;
				// background: $page-color-light;
				height: 100upx;
				// border-radius: 4px;
				border-bottom: 1px solid #f8f8f8;
				margin-bottom: 20upx;

				&:last-child {
					margin-bottom: 0;
				}

				.tit {
					height: 50upx;
					line-height: 56upx;
					font-size: 24rpx;
				}

				input {
					height: 60upx;
					font-size: 28rpx;
					width: 100%;
				}
			}

			.input-item-sms-code {
				position: relative;

				.sms-code-btn {
					position: absolute;
					right: 30upx;
					color: #333;
					bottom: 30upx;
					font-size: 26upx;
				}

				.sms-code-resend {
					color: #999;
				}
			}

			
		}

		
		.left-top-sign {
			font-size: 120upx;
			position: relative;
			height:100rpx;
			left: -16upx;
		}

		.right-top-sign {
			position: absolute;
			height:50rpx;
			top: 80upx;
			right: -30upx;
			z-index: 95;

			&:before,
			&:after {
				display: block;
				content: '';
				width: 400upx;
				height: 80upx;
				background: #b4f3e2;
			}

			&:before {
				transform: rotate(50deg);
				border-radius: 0 50px 0 0;
			}

			&:after {
				position: absolute;
				right: -198upx;
				top: 0;
				transform: rotate(-50deg);
				border-radius: 50px 0 0 0;
				/* background: pink; */
			}
		}

		.register-section {
			margin: 50upx 0 50upx 0;
			width: 100%;
			text-align: center;

			text {
				margin-left: 10upx;
				margin-right: 10upx;
			}
		}
	}


</style>
